<template>
  <div id="homeoutlines">
    <!-- 编辑的弹框 -->
    <el-dialog title="编辑节点" :visible.sync="editvisible" width="300px">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="节点名称">
          <el-input v-model="editOutLinesName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editSave()">保存</el-button>
          <el-button @click="editvisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 创建根节点的弹框 -->
    <el-dialog title="创建根节点" :visible.sync="rootvisible" width="300px">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="节点名称">
          <el-input v-model="rootOutLinesName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rootSave()">创建</el-button>
          <el-button @click="rootvisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 创建子节点的弹框 -->
    <el-dialog title="创建子节点" :visible.sync="childvisible" width="300px">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="节点名称">
          <el-input v-model="childOutLinesName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="childSave()">创建</el-button>
          <el-button @click="childvisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 头部 -->
    <el-card :body-style="{ padding: '20px' }" shadow="never" v-loading="loading">
      <div slot="header">大纲管理
        <el-button type="primary" size="mini" icon="el-icon-plus" @click.stop="addRoot()">创建根节点</el-button>
      </div>
      <el-tree :data="outlines" :props="{label:'outline_name'}">
        <div slot-scope="{node,data}" @mouseover="showOpt=data.id" @mouseout="showOpt=false" id="outlinesbox">
          <div id="outlinestitle">{{data.outline_name}}</div>
          <div class="box" v-show="showOpt==data.id">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click.stop="addChild(data.id)"
            >创建子节点</el-button>
            <el-button type="primary" size="mini" icon="el-icon-edit" @click.stop="edit(data)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click.stop="del(data.id)">删除</el-button>
            <el-button type="primary" icon="el-icon-arrow-up" circle size="mini" v-show="node.previousSibling" @click.stop="sort(data.id,'up')"></el-button>
            <el-button type="success" icon="el-icon-arrow-down" circle  size="mini" v-show="node.nextSibling" @click.stop="sort(data.id,'down')"></el-button>
          </div>
        </div>
      </el-tree>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showOpt:'',
      rootOutLinesName: "",
      childOutLinesName: "",
      editOutLinesName: "",
      outlines: [],
      rootvisible: false,
      childvisible: false,
      editvisible: false,
      loading: false,
      parentid: "",
      editid: ""
    };
  },
  created() {
    this.getoutlines();
  },
  methods: {
    //   获取大纲列表
    getoutlines() {
      this.loading = true;
      this.axios.get("/outlines").then(ret => {
        this.loading = false;
        let { data } = ret.data;
        this.outlines = data;
        console.log(this.outlines);
      });
    },
    addRoot() {
      this.rootvisible = true;
    },
    // 保存根节点
    rootSave() {
      this.axios
        .post("/outlines/add", {
          outline_name: this.rootOutLinesName,
          parent_id: 0,
          status: 1
        })
        .then(() => {
          this.getoutlines();
          this.rootvisible = false;
          this.$message.success("添加成功");
        });
    },
    // 添加子节点
    addChild(id) {
      this.childvisible = true;
      this.parentid = id;
      this.axios.get;
    },
    //保存根节点
    childSave() {
      this.axios
        .post("/outlines/add", {
          outline_name: this.childOutLinesName,
          parent_id: this.parentid,
          status: 1
        })
        .then(() => {
          this.getoutlines();
          this.childvisible = false;
          this.$message.success("添加成功");
        });
    },

    // 删除节点
    del(id) {
      this.$confirm("删除", "删除", "提示")
        .then(() => {
          this.axios
            .delete(`/outlines/del/${id}`)
            .then(() => {
              this.getoutlines();
            })
            .catch(() => {
              this.$message.error("请删除子菜单");
            });
        })
        .catch(() => {});
    },
    // 编辑节点
    edit(data) {
      (this.editvisible = true), (this.editid = data.id);
      this.editOutLinesName = data.outline_name;
    },
    // 编辑完成后保存
    editSave() {
      this.axios
        .put(`/outlines/edit/${this.editid}`, {
          outline_name: this.editOutLinesName
        })
        .then(() => {
          this.getoutlines(), (this.editvisible = false);
        })
        .catch(() => {});
    },
    // 排序
    sort(id,dir){
        this.axios.put(`/outlines/sort/${id}/${dir}`).then(()=>{
            this.getoutlines()
        })

    }
  }
};
</script>

<style>
.el-tree-node__content {
  border: 1px solid #eee;
  margin-top: 10px;
  padding:10px;
}
#outlinestitle{
  height: 30px;
  width: 100px;
  line-height: 30px;
}
#outlinesbox{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
/* .el-tree-node__content:hover .box {
  visibility: visible;
} */
/* .box {
  display: inline-block;
  position: absolute;
  left: 500px;
  top: 10px;
  visibility: hidden;
  
} */

</style>
